<h2>{{ 'POLICY.PWD_AGE.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'POLICY.PWD_AGE.DESCRIPTION' | translate }}</p>

<div *ngIf="loading" class="spinner-wr">
  <mat-spinner diameter="30" color="primary"></mat-spinner>
</div>

<ng-template cnslHasRole [hasRole]="['policy.delete']">
  <button
    *ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
    matTooltip="{{ 'POLICY.RESET' | translate }}"
    color="warn"
    (click)="resetPolicy()"
    mat-stroked-button
  >
    {{ 'POLICY.RESET' | translate }}
  </button>
</ng-template>

<form class="lifetime-form" (ngSubmit)="savePolicy()" [formGroup]="passwordAgeForm" autocomplete="off">
  <cnsl-card *ngIf="passwordAgeData">
    <div class="age-content">
      <div class="row">
        <cnsl-form-field class="pwd-age-form-field" required="true">
          <cnsl-label>{{ 'POLICY.DATA.MAXAGEDAYS' | translate }}</cnsl-label>
          <input cnslInput type="number" name="maxAgeDays" formControlName="maxAgeDays" />
        </cnsl-form-field>
      </div>

      <div class="row">
        <cnsl-form-field class="pwd-age-form-field" required="true">
          <cnsl-label>{{ 'POLICY.DATA.EXPIREWARNDAYS' | translate }}</cnsl-label>
          <input cnslInput type="number" name="expireWarnDays" formControlName="expireWarnDays" />
        </cnsl-form-field>
      </div>
    </div>
  </cnsl-card>
</form>

<div class="btn-container">
  <button
    (click)="savePolicy()"
    [disabled]="(['policy.write'] | hasRole | async) === false"
    color="primary"
    type="submit"
    mat-raised-button
  >
    {{ 'ACTIONS.SAVE' | translate }}
  </button>
</div>
